<template>
  <view class="bg-gray-50 min-h-screen">
    <!-- 顶部导航栏 -->
    <view class="fixed top-0 left-0 right-0 bg-white shadow-md z-10 shadow-sm">
      <view class="container mx-auto px-4 py-3 flex items-center justify-between-between-between">
        <text class="text-xl font-semibold text-primary">个人中心</text>
        <view class="flex items-center space-x-3">
          <button class="text-gray-500 hover:text-primary transition-all duration-300" @click="showMessageCenter">
            <text class="fa fa-bell-o text-lg"></text>
          </button>
          <button class="text-gray-500 hover:text-primary transition-all duration-300" @click="showSettings">
            <text class="fa fa-cog text-lg"></text>
          </button>
        </view>
      </view>
    </view>

    <!-- 主内容区 -->
    <view class="container mx-auto px-4 pt-16 pb-24">
      <!-- 用户信息卡片 -->
      <view class="bg-white rounded-lg shadow-card p-4 mb-4">
        <view class="flex items-center">
          <view class="w-16 h-16 rounded-full bg-primary-light flex items-center justify-center justify-center text-primary mr-4">
            <text class="text-2xl font-medium">张</text>
          </view>
          <view class="flex-1">
            <view class="flex justify-between items-center">
              <text class="text-lg font-medium">张先生三</text>
              <text class="text-xs text-primary">编辑资料</text>
            </view>
            <text class="text-xs text-gray-500">全栈科技有限公司 | 财务管理员</text>
            <text class="text-xs text-gray-500">上次登录: 2024-10-20 14:30</text>
          </view>
        </view>
      </view>

      <!-- 快捷中心 -->
      <view class="bg-white rounded-lg shadow-card p-4 mb-4">
        <text class="text-sm font-medium mb-3 block">快捷功能</text>
        <view class="grid grid-cols-4 gap-3">
          <view class="flex flex-col items-center justify-center">
            <view class="w-12 h-12 rounded-full bg-primary-light flex items-center justify-center text-primary mb-2">
              <text class="fa fa-credit-card text-lg"></text>
            </view>
            <text class="text-xs">我的账户</text>
          </view>
          <view class="flex-col-col items-center justify-center">
            <view class="w-12 h-12 rounded-full bg-secondary-light flex items-center justify-center text-secondary mb-2">
              <text class="fa fa-file-text-o text-lg"></text>
            </view>
            <text class="text-xs">我的合同</text>
          </view>
          <view class="flex-col-col items-center justify-center">
            <view class="w-12 h-12 rounded-full bg-warning bg-opacity-10 flex items-center justify-center text-warning mb-2">
              <text class="fa fa-question-circle text-lg"></text>
            </view>
            <text class="text-xs">帮助中心</text>
          </view>
          <view class="flex-col-col items items-center-center justify-center">
            <view class="w-12 h-12 rounded-full bg-danger bg-opacity-10 flex items-center justify-center text-danger mb-2">
              <text class="fa fa-headphones text-lg"></text>
            </view>
            <text class="text-xs">客服支持</text>
          </view>
        </view>
      </view>

      <!-- 系统设置 -->
      <view class="bg-white rounded-lg shadow-card mb-4">
        <view class="border-b border-gray-200">
          <view class="flex items-center justify-between p-4">
            <view class="flex items-center">
              <view class="w-8 h-8 rounded-full bg-primary-light flex-10 flex items-center justify-center text-primary mr-3">
                <text class="fa fa-building text-lg"></text>
              </view>
              <text class="text-sm">公司信息</text>
            </view>
            <text class="fa fa-chevron-right text-gray-400"></text>
          </view>
        </view>
        <view class="border-b border-gray-200">
          <view class="flex items-center justify-between p-4">
            <view class="flex items-center">
              <view class="w-8 h-8 rounded-full bg-primary-light flex items-center justify-center text-primary mr-3">
                <text class="fa fa-user-o text-lg"></text>
              </view>
              <text class="text-sm">账号安全</text>
            </view>
            <text class="fa fa-chevron-right text-gray-400"></text>
          </view>
        </view>
        <view class="border-b border-gray-200">
          <view class="flex items-center justify-between p-4">
            <view class="flex items-center">
              <view class="w-8 h-8 rounded-full bg-secondary-light-light-light flex items-center justify-center-center text-primary mr-3">
                <text class="fa fa-bell-o text-lg"></text>
              </view>
              <text class="text-sm">通知设置</text>
            </view>
            <text class="fa fa-chevron-right text-gray-400"></text>
          </view>
        </view>
        <view class="border-b border-gray-200">
          <view class="flex items-center justify-between p-4">
            <view class="flex items-center">
              <view class="w-8 h-8 rounded-full bg-primary-light-light flex items-center justify-center-center text-primary mr-3">
                <text class="fa fa-lock text-lg"></text>
              </view>
              <text class="text-sm">隐私设置</text>
            </view>
            <text class="fa fa-chevron-right text-gray-400"></text>
          </view>
        </view>
        <view>
          <view class="flex items-center justify-between p-4">
            <view class="flex items-center">
              <view class="w-8 h-8 rounded-full bg-primary-light-light-light flex items-center justify-center text-primary mr-3">
                <text class="fa fa-language text-lg"></text>
              </view>
              <text class="text-sm">语言与地区</text>
            </view>
            <text class="fa fa-chevron-right text-gray-400"></text>
          </view>
        </view>
      </view>

      <!-- 关于服务 -->
      <view class="bg-white rounded-lg shadow-card mb-4">
        <view class="border-b border-gray-200">
          <view class="flex items-center justify-between p-4">
            <view class="flex items-center">
              <view class="w-8 h-8 rounded-full bg-secondary-light flex items-center justify-center text-secondary mr-3">
                <text class="fa fa-book text-lg"></text>
              </view>
              <text class="text-sm">使用教程</text>
            </view>
            <text class="fa fa-chevron-right text-gray-400"></text>
          </view>
        </view>
        <view class="border-b border-gray-200">
          <view class="flex items-center justify-between p-4">
            <view class="flex items-center">
              <view class="w-8 h-8 rounded-full bg-secondary-light-light flex items-center justify-center text-primary mr-3">
                <text class="fa fa-question-circle text-lg"></text>
              </view>
              <text class="text-sm">常见问题</text>
            </view>
            <text class="fa fa-chevron-right text-gray-400"></text>
          </view>
        </view>
        <view>
          <view class="flex items-center justify-between p-4">
            <view class="flex items-center">
              <view class="w-8 h-8 rounded-full bg-danger bg-opacity-10 flex items-center justify-center text-danger mr-3">
                <text class="fa fa-headphones text-lg"></text>
              </view>
              <text class="text-sm">联系客服</text>
            </view>
            <text class="fa fa-chevron-right text-gray-400"></text>
          </view>
        </view>
      </view>

      <!-- 关于 -->
      <view class="bg-white rounded-lg shadow-card p-4">
        <view class="border-b border-gray-200">
          <view class="flex items-center justify-between p-4">
            <view class="flex items-center">
              <view class="w-8 h-8 rounded-full bg-primary-light-light flex items-center justify-center text-primary mr-3">
                <text class="fa fa-info-circle text-lg"></text>
              </view>
              <text class="text-sm">关于我们</text>
            </view>
            <text class="fa fa-chevron-right text-gray-400"></text>
          </view>
        </view>
        <view class="border-b border-gray-200">
          <view class="flex items-center justify-between p-4">
            <view class="flex items-center">
              <view class="w-8 h-8 rounded-full bg-primary-light flex items-center justify-center text-primary mr-3">
                <text class="fa fa-shield text-lg"></text>
              </view>
              <text class="text-sm">隐私政策</text>
            </view>
            <text class="fa fa-chevron-right text-gray-400"></text>
          </view>
        </view>
        <view>
          <view class="flex items-center justify-between p-4">
            <view class="flex items-center">
              <view class="w-8 h-8 rounded-full bg-primary-light flex items-center justify-center text-primary mr-3">
                <text class="fa fa-file-text-o text-lg"></text>
              </view>
              <text class="text-sm">用户协议</text>
            </view>
            <text class="fa fa-chevron-right text-gray-400"></text>
          </view>
        </view>
      </view>

      <!-- 退出登录按钮 -->
      <button class="w-full py-3 bg-white border border-gray-200 rounded-lg text-gray-500 text-sm mt-4" @click="showLogoutConfirm">
        退出登录
      </button>
    </view>

    <!-- 底部导航栏 -->
    <view class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-10">
      <view class="container mx-auto flex justify-around">
        <navigator url="/pageNew/pages/index/index/index" class="flex flex-col items-center py-2 px-4 text-gray-400">
          <text class="fa fa-home text-lg"></text>
          <text class="text-xs mt-1">首页</text>
        </navigator>
        <navigator url="/pageNew/pages/accounting/index" class="flex flex-col items-center py-2 px-4 text-gray-400">
          <text class="fa fa-calculator text-lg"></text>
          <text class="text-xs mt-1">记账</text>
        </navigator>
        <navigator url="/pageNew/pages/invoice/index" class="flex flex-col items-center py-2 px-4 text-gray-400">
          <text class="fa fa-file-text-o text-lg"></text>
          <text class="text-xs mt-1">发票</text>
        </navigator>
        <navigator url="/pageNew/pages/employee/index" class="flex flex-col items-center py-2 px-4 text-gray-400">
          <text class="fa fa-users text-lg"></text>
          <text class="text-xs mt-1">员工</text>
        </navigator>
        <navigator url="/pageNew/pages/profile/index" class="flex flex-col items-center py-2 px-4 text-primary">
          <text class="fa fa-user-o text-lg"></text>
          <text class="text-xs mt-1">我的</text>
        </navigator>
      </view>
    </view>

    <!-- 退出登录确认弹窗 -->
    <view id="logoutModal" class="fixed inset-0 bg-gray-500 bg-opacity-50 flex items-center justify-center z-50" :class="{ 'hidden': !showLogoutModal }">
      <view class="bg-white rounded-lg w-full max-w-sm-sm mx-4">
        <view class="p-4 border-b border-gray-200">
          <text class="text-base font-medium">确认退出</text>
        </view>
        <view class="p-4">
          <text class="text-sm mb-4">您确定要退出登录吗？</text>
          <view class="flex justify-end space-x-2">
            <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg text-sm" @click="toggleLogoutModal">取消</button>
            <button class="px-4 py-2 bg-primary text-white rounded-lg text-sm" @click="confirmLogout">退出登录</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 退出登录确认弹窗
      showLogoutModal: false
    };
  },
  onLoad() {
    console.log('个人中心页面加载完成');
  },
  onReady() {
    // 页面渲染完成
  },
  methods: {
    // 显示消息中心
    showMessageCenter() {
      uni.showToast({
        title: '消息中心即将上线',
        icon: 'none'
      });
    },
    
    // 显示设置
    showSettings() {
      uni.showToast({
        title: '设置功能即将上线',
        icon: 'none'
      });
    },
    
    // 显示退出登录确认弹窗
    showLogoutConfirm() {
      this.showLogoutModal = true;
    },
    
    // 关闭退出登录确认弹窗
    toggleLogoutModal() {
      this.showLogoutModal = false;
    },
    
    // 确认退出登录
    confirmLogout() {
      // 模拟退出登录
      this.showLogoutModal = false;
      
      // 跳转到登录页面
      uni.navigateTo({
        url: '/pageNew/pages/login/index'
      });
      
      uni.showToast({
        title: '已安全退出登录',
        icon: 'success'
      });
    }
  }
};
</script>

<style>
/* 引入全局全局样式 */
page {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 自定义样式 */
.container {
  width: 100%;
  max-width: 750rpx;
  margin: 0 auto;
}

.shadow-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.bg-primary {
  background-color: #1E88E5;
}

.text-primary {
  color: #1E88E5;
}

.bg-primary-light {
  background-color: #E3F2FD;
}

.bg-secondary {
  background-color: #4CAF50;
}

.text-secondary {
  color: #4CAF50;
}

.bg-secondary-light {
  background-color: #E8F5E9;
}

.bg-danger {
  background-color: #F44336;
}

.text-danger {
  color: #F44336;
}

.bg-warning {
  background-color: #FF9800;
}

.text-warning {
  color: #FF9800;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.duration-300 {
  transition-duration: 300ms;
}
</style>
</template>
